﻿@{
    Layout = "_LayoutAdmin";
}
@Html.AntiForgeryToken()

@model IReadOnlyList<Moonglade.Model.Tag>

@{
    ViewBag.Title = "Manage Tags";
}

@section scripts{
    <script>
        $(".btn-delete").click(function () {
            var tagid = $(this).data("tagid");
            var cfm = confirm("Confirm to delete tag: " + $(this).text().trim());
            if (cfm) {
                ajaxPostWithCSRFToken("delete",
                    {
                        tagId: tagid
                    }, function (data) {
                        $("#li-tag-" + data).hide();
                    });
            }
        });

        $(".span-tagcontent-editable").blur(function () {
            var tagId = $(this).data("tagid");
            var newTagName = $(this).text().trim();
            ajaxPostWithCSRFToken("update",
                {
                    tagId: tagId,
                    newTagName: newTagName
                },
                function (data) {
                    $("#li-tag-" + data.tagId).addClass("updated");
                });
        });
    </script>
}

<h3>
    Tags
</h3>
<hr />

<ul class="list-unstyled ul-tag-mgr">
    @foreach (var tag in Model.OrderBy(model => model.TagName))
    {
        <li id="li-tag-@tag.Id">
            <span class="span-tagcontent-editable" contenteditable="true" data-tagid="@tag.Id">@tag.TagName</span>
            <a class="btn-delete" data-tagid="@tag.Id">
                <i class="icon-cross"></i>
                <span class="d-none">@tag.TagName</span>
            </a>
        </li>
    }
</ul>
